Docs: Add error handling section to submission handling docs #1566
Conversation
| if (response.isError) { | ||
| // Username is taken, return an error for the username field | ||
| return 'Username is already taken!' | ||
| } |
There was a problem hiding this comment.
This says
return an error for the username field
but the error seems to go to the Form not to the Field
There was a problem hiding this comment.
Good catch! The comment is kind of redundant now. I'll remove it!
| onSubmit: async ({ value }) => { | ||
| // If an error happens, they are accessible through | ||
| // `createAccountMutation.error` | ||
| await createAccountMutation.mutateAsync(value) |
There was a problem hiding this comment.
Promoting "mutateAsync" here feels off:
you should almost always use
mutate
– https://tkdodo.eu/blog/mastering-mutations-in-react-query#mutate-or-mutateasync
| await createAccountMutation.mutateAsync(value) | |
| createAccountMutation.mutate(value, { | |
| onSuccess: () => { | |
| // handle success by navigate to another route e.g. | |
| } | |
| }) |
There was a problem hiding this comment.
Here's the thought process behind it:
- Is
mutatesynchronous? If not,onSubmitwould finish immediately andisSubmittingwould flashtruefor a moment - Error handling informs TSF about
isSubmitSuccessful, which would cause a disconnect ifmutateerrors
There was a problem hiding this comment.
Then this seems like one of those exceptions to not prefere mutate over mutateAsync ;-)
It's perfect as it is, thanks for clarifying!
There was a problem hiding this comment.
Do you reckon this should be mentioned somewhere? I assume there's lots of users combining Tanstack Form with TansStack Query
There was a problem hiding this comment.
There's some explenation here: https://tanstack.com/form/latest/docs/reference/type-aliases/baseformstate#issubmitting
I think it would be good to mention it on the "Submission Handling"-Page as well as it clears up a lot of questions.
Signed-off-by: Pascal Küsgen <pascalkuesgen@gmail.com>
docs: expand submission handling in angular
This PR adds some code snippets to get users started on the three common types of errors:
The user errors are implemented using form / field validators (with links to the validation guide page). The Server error example is implemented using TanStack Query.